<template>
  <div class="home">
   <home-header></home-header>
   <home-wheel :list="swiperList"></home-wheel>
   <home-scenic :list="scenicList"></home-scenic>
   <home-list></home-list>
   <home-popular :list="hotlist"></home-popular>
   <home-like :list="likelist"></home-like>
   <home-weekend :list="weekendlist"></home-weekend>
  </div>
</template>

<script>
import HomeHeader from './components/header.vue'
import HomeWheel from './components/wheelPlanting.vue'
import HomeScenic from './components/Scenic.vue'
import HomeList from './components/List.vue'
import HomePopular from './components/Popular.vue'
import HomeLike from './components/Like.vue'
import HomeWeekend from './components/Weekend.vue'
import axios from 'axios'
// @ is an alias to /src

export default {
  name: 'home',
  components: {
    HomeHeader,
    HomeWheel,
    HomeScenic,
    HomeList,
    HomePopular,
    HomeLike,
    HomeWeekend
  },
  data () {
    return {
      swiperList: [],
      scenicList: [],
      hotlist: [],
      likelist: [],
      weekendlist: []
    }
  },
  mounted () {
    axios.get('/losaldata/index.json')
      .then((res) => {
        let dataObj = res.data
        let dataList = dataObj.data
        if (dataObj.ret && dataList) {
          this.swiperList = dataList.swiperList
          this.scenicList = dataList.scenicList
          this.hotlist = dataList.hotlist
          this.likelist = dataList.likelist
          this.weekendlist = dataList.weekendlist
        }
      })
  }
}
</script>

<style lang="stylus" scoped="scoped">
  .home
    background #f5f5f5
</style>
